// 设置内容组件
// 根据当前分类显示对应的设置面板

import React from 'react';
import { useSettingsStore } from '../../stores/settingsStore';
import { SettingsCategory } from '../../types/settings';
import { EditorSettingsPanel } from './panels/EditorSettingsPanel';
import { AppearanceSettingsPanel } from './panels/AppearanceSettingsPanel';
import { KeyboardSettingsPanel } from './panels/KeyboardSettingsPanel';
import { FileSettingsPanel } from './panels/FileSettingsPanel';
import { ExtensionSettingsPanel } from './panels/ExtensionSettingsPanel';
import { AdvancedSettingsPanel } from './panels/AdvancedSettingsPanel';
import { SettingsSearchResults } from './SettingsSearchResults';

export const SettingsContent: React.FC = () => {
  const { activeCategory, searchQuery } = useSettingsStore();

  // 如果有搜索查询，显示搜索结果
  if (searchQuery) {
    return <SettingsSearchResults />;
  }

  // 根据活动分类渲染对应的设置面板
  const renderSettingsPanel = () => {
    switch (activeCategory) {
      case SettingsCategory.Editor:
        return <EditorSettingsPanel />;
      case SettingsCategory.Appearance:
        return <AppearanceSettingsPanel />;
      case SettingsCategory.Keyboard:
        return <KeyboardSettingsPanel />;
      case SettingsCategory.Files:
        return <FileSettingsPanel />;
      case SettingsCategory.Extensions:
        return <ExtensionSettingsPanel />;
      case SettingsCategory.Advanced:
        return <AdvancedSettingsPanel />;
      default:
        return <EditorSettingsPanel />;
    }
  };

  return (
    <div className="p-6">
      {renderSettingsPanel()}
    </div>
  );
};
